// webpack开发配置
const path = require('path')
const webpack = require('webpack')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {// 配置对象
    // 入口(多页面应用)
    entry: {
        'index': './src/index.js',// 首页入口文件
        'food-list': './src/food-list.js',// 菜品列表入口文件
        'food-add': './src/food-add.js',// 添加菜品入口文件
        'login': './src/login.js',// 登录入口文件
        'register': './src/register.js',// 登录入口文件
    },

    // 输出
    output: {
        // 如果根目录中没有dist目录,webpack会自动创建dist目录
        path: undefined,// 开发模式在内存中打包,不需要存储目录
        filename: '[name]-[hash:5].js'// 打包后文件的名称
    },

    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                // 匹配 .css 结尾的文件
                test: /\.css$/,
                // 使用数组中的loader来处理匹配的文件(从右到左执行)
                use: [ 
                    'style-loader', 
                    'css-loader' 
                ]
            },
            {
                // 匹配 .less 结尾的文件
                test: /\.less$/,
                // 使用数组中的loader来处理匹配的文件(从右到左执行)
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },
            {
                // 匹配 图片 文件
                test: /\.(png|jpe?g|gif)$/,
                // 资源类型
                type: 'asset', // file-loader  url-loader
                // 解析资源
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转成base64编码的url地址
                        // 优点: 减少请求次数(减轻服务器压力)
                        // 缺点: 体积变得稍微大一点
                        maxSize: 1024 * 10
                    }
                },
                generator: {
                    // 设置图片打包后的存储目录/图片名称
                    // [hash:5] 占位符,使用5位哈希值作为文件名 'a5sgd'
                    // [ext] 使用文件原来的后缀名 '.png'
                    // [hash:5][ext] -> 'a5sgd.png'
                    filename: './imgs/[hash:5][ext]'
                }
            },
            {
                // 匹配 相应资源 的文件
                test: /\.(eot|ttf|svg|woff2?)$/,
                type: 'asset', // file-loader  url-loader
                generator: {
                    filename: './fonts/[hash:6][ext]'
                }
            },
            {
                // 匹配 .js 结尾的文件
                test: /\.js$/,
                // 排除node_modules目录(不编译这个目录)
                exclude: /node_modules/,
                // 使用下面loader配置来处理js文件
                use: {
                    loader: 'babel-loader',
                    // babel配置,有配置文件时,这里不需配置了
                    // options: {
                    //     presets: ['@babel/preset-env']
                    // }
                }
            }
        ]
    },

    // 插件
    plugins: [
        // plugins的配置
        // 创建插件的实例放在数组中
        new webpack.DefinePlugin({
            // 定义webpack中的环境变量(全局变量)
            // webpack在打包的时候,遇到__WEBPACK__ENV环境变量时,
            // 使用'dev'来替换__WEBPACK__ENV
            __WEBPACK__ENV: "'dev'"
        }),
        new webpack.ProvidePlugin({
            // 自动加载jQuery模块
            // 在其他模块中可以直接使用 $ 或 jQuery
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new EslintWebpackPlugin({
            // 告诉eslint只检查src中的js文件
            context: path.join(__dirname,'src'),
            // 设置排除lib目录不检查
            exclude: path.join(__dirname,'src/lib')
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 作为模板打包
            // 打包出来的html文件有两个特征:
            // 1.内容和源文件一样
            // 2.自动引入根据入口文件打包出来的js资源
            template: path.join(__dirname,'public/index.html'),
            // 打包后生成html的文件名及存储目录
            filename: './index.html',
            chunks: ['index'],// 使用对应的入口资源
            // 打包favicon.ico
            favicon: path.join(__dirname,'public/favicon.ico'),
        }),
        new HtmlWebpackPlugin({
            // 以 public/food-list.html 作为模板打包
            // 打包出来的html文件有两个特征:
            // 1.内容和源文件一样
            // 2.自动引入根据入口文件打包出来的js资源
            template: path.join(__dirname,'public/food-list.html'),
            // 打包后生成html的文件名及存储目录
            filename: './food-list.html',
            chunks: ['food-list']// 使用对应的入口资源
        }),
        new HtmlWebpackPlugin({
            // 以 public/food-add.html 作为模板打包
            // 打包出来的html文件有两个特征:
            // 1.内容和源文件一样
            // 2.自动引入根据入口文件打包出来的js资源
            template: path.join(__dirname,'public/food-add.html'),
            // 打包后生成html的文件名及存储目录
            filename: './food-add.html',
            chunks: ['food-add']// 使用对应的入口资源
        }),
        new HtmlWebpackPlugin({
            // 以 public/login.html 作为模板打包
            // 打包出来的html文件有两个特征:
            // 1.内容和源文件一样
            // 2.自动引入根据入口文件打包出来的js资源
            template: path.join(__dirname,'public/login.html'),
            // 打包后生成html的文件名及存储目录
            filename: './login.html',
            chunks: ['login']// 使用对应的入口资源
        }),
        new HtmlWebpackPlugin({
            // 以 public/register.html 作为模板打包
            // 打包出来的html文件有两个特征:
            // 1.内容和源文件一样
            // 2.自动引入根据入口文件打包出来的js资源
            template: path.join(__dirname,'public/register.html'),
            // 打包后生成html的文件名及存储目录
            filename: './register.html',
            chunks: ['register']// 使用对应的入口资源
        }),
    ],

    // 开发服务器
    devServer: {
        // 服务域名/ip地址
        host: 'localhost',
        // 端口号
        port: '3000',
        // 自动打开默认浏览器
        open: true,
        // 模块热替换(自动刷新)
        hot: true,
        // 配置代理
        /* proxy: {
            // 请求 http://localhost:3000/user/islogin
            // 转发 http://localhost:8080/user/islogin
            '/user': 'http://localhost:8080'
        } */

        /* proxy: [{
            // 请求 http://localhost:3000/user/islogin
            // 转发 http://localhost:8080/user/islogin

            // 请求 http://localhost:3000/file/upload
            // 转发 http://localhost:8080/file/upload

            // 请求 http://localhost:3000/food/add
            // 转发 http://localhost:8080/food/add
            context: ['/user','/file','/food'],
            target: 'http://localhost:8080'
        }] */

        proxy: {
            '/api': {
                // 请求 http://localhost:3000/api/user/islogin
            // 转发 http://localhost:8080/user/islogin
                target: 'http://localhost:8080',
                pathRewrite: {'^/api':''}// 将转发地址中的'/api'替换为''
            }
        }
    },

    // 模式
    mode: 'development' // 开发模式
}
